<template>
	<div class="resale-components-container">
		<ul class="purchase-order-list">
		    <li @click="todetail(item)" v-for="(item, index) in listData" :key="index">
				<div class="order-content">
					<div class="order-img">
						<img :src="item.smallPic" alt="">
					</div>
					<div class="order-text">
						<p class="pro-name">{{item.productName}}({{item.farmName}})</p>
						<p class="pro-address"><span>养殖地：{{item.cattleAddress}}</span><span>牧场：{{item.farmName}}</span></p>
						<p class="pro-weight"><span>重量：{{item.productWeight}}{{item.productWeightUnit}}</span><span>单价：{{item.salesPrice}}元/kg</span></p>
						<p class="pro-price"><span class="pro-c"><i>{{item.totalPrice}}</i>{{item.productPriceUnit}}</span></p>
						<p class="pro-date"><span class="order-dete">剩余交货期：<i>{{item.deliveryTime}}个月</i></span></p>
					</div>
				</div>
				<div class="pro-price-box">
					<span>求购数量：{{item.totalNum}}头</span>
					<span>合计：{{item.orderMoney}}元</span>
				</div>
				<div class="pro-btn">
					已完成
				</div>
		    </li>
		</ul>
		
	</div>
</template>

<script>
	
	export default {
		props: {
			listData: Array
		},
		data(){
			return {
				
			}
		},
		methods: {
			// 转售详情
			todetail(item){
				console.log(item)
				this.$router.push({
					path: '/my/buyOrder/tab3detail/' + item.id
				})
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	@import "./tabs.scss";
	button{
		border: none;
	}
	.order-text{
		
		.pro-price{
			display: flex;
			justify-content: flex-end !important;
			margin-bottom: 12px;
		}
		.pro-date{
			display: flex;
			justify-content: flex-end !important;
			span{
				font-size: 12px;
				color: #969C9E;
				i{
					color: #31BC8D;
				}
			}
		}
	}
	.pro-btn{
		color: #31BC8D;
		font-size: 18px;
		padding-top: 16px;
	}
</style>
